<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="icon" type="image/png" sizes="16x16" href="./rainbow.png">
    <!-- import CSS -->
    <link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">

    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                label="id"
                width="180">
            <template slot-scope="scope">

                <span style="margin-left: 10px">{{ scope.row.id }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="姓名"
                width="180">
            <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                    <p>姓名: {{ scope.row.name }}</p>
                    <p>年龄: {{ scope.row.age }}</p>
                    <div slot="reference" class="name-wrapper">
                        <el-tag size="medium">{{ scope.row.name }}</el-tag>
                    </div>
                </el-popover>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑
                </el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>

</div>
</body>
<!-- import Vue before Element -->
<script src="./vue/vue.min.js"></script>
<!-- import JavaScript -->
<script src="./element-ui/lib/index.js"></script>
<script src="./axios/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                tableData: []
            }
        },
        methods: {
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            }
        },
        mounted() {
            let that = this
            axios.get('/user/list')
                .then(function (response) {
                    console.log(response);
                    that.tableData = response.data;
                })
                .catch(function (error) {
                    console.error(error);
                });
        }
    })


</script>
</html>